<template>
  <div class="august">
    <img class="august-bg" src="./bg.png" alt="">
    <div class="august-money" :style="{top: moneyTop + 'px'}">
      <img src="./money.png" alt="">
      <p :style="{top: moneyp1 + 'px'}">1.好友通过您发的链接完成注册</p>
      <p :style="{top: moneyp2 + 'px'}">2.好友累计出借满5000元</p>
      <p :style="{top: moneyp3 + 'px'}">3.获得80元现金+8%出借收益奖励</p>
      <p :style="{top: moneyp4 + 'px'}">邀请好友奖励多多，每成功邀请1位好友出借获80元现金，还享好友180天内所投全部定期项目产生收益的8%，作为答谢奖；好友成功复投，您还将获30元现金，依然享好友180天内所投全部定期项目产生收益的8%，作为答谢奖。</p>
    </div>
    <div class="august-movie" :style="{top: movieTop + 'px'}">
      <img src="./movie.png" alt="">      
    </div>
    <div class="august-info" :style="{top: infoTop + 'px'}">
      <img src="./info.png" alt="">
      <div class="august-info-inner" :style="{top: infop + 'px'}">
        <p> 1、本活动成功邀请的说明：通过个人邀请码或邀请链接注册，被邀请人在活动期间注册且首笔出借满10000元即为邀请成功。</p>
        <p> 2、现金奖是在活动期间实时发放到您的账户余额，请及时通过账户流水查询。</p>
        <p> 3、现金奖具体活动规则请查看<a :href="url">“邀请好友得奖励”</a>活动详情页。</p>
        <p> 4、影豆电影票兑换码价值90元，将通过系统消息进行发放，请注意查收。</p>
        <p> 5、影豆电影票兑换码请于9月1日之前进行兑换，兑换后卡券有效期3个月。</p>
        <p> 6、本活动最终解释权归分秒金融所有，若有疑问请致电分秒金融客服400-608-2001。</p>
      </div>
    </div>
    <div class="august-btn"  :style="{top: btntop + 'px'}">
      <div class="august-btn-inner">
        <router-link to="/invest">
          <img src="./btn.png" alt="立即投资">
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        w: 0,
        h: 0
      }
    },
    computed: {
      moneyTop () {
        return (382 / 4454) * this.h
      },
      movieTop () {
        return (1905 / 4454) * this.h
      },
      infoTop () {
        return (3500 / 4454) * this.h
      },
      moneyp1 () {
        return (370 / 4454) * this.h
      },
      moneyp2 () {
        return (752 / 4454) * this.h
      },
      moneyp3 () {
        return (1160 / 4454) * this.h
      },
      moneyp4 () {
        return (1272 / 4454) * this.h
      },
      infop () {
        return (180 / 4454) * this.h
      },
      btntop () {
        return (4320 / 4454) * this.h
      },
      url () {
        return typeof this.$route.query.type !== 'undefined' ? `/activityInviteFriend?type=${this.$route.query.type}` : '/activityInviteFriend'
      }
    },
    created () {
      this.w = document.documentElement.clientWidth
      this.h = this.w * (4454 / 750)
    }
  }
</script>

<style lang='scss'>
  .august {
    position: relative;
    top: 0;
    left: 0;
    font-size: 0;
    img {
      width: 100%;
    }
    &-bg {
      width: 100%;
    }
    &-money,
    &-movie,
    &-info {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      img {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
    &-money {
      p {
        width: 100%;
        position: absolute;
        left: 0;
        text-align: center;
        font-size: 28px;
        color: #46489a;
        line-height: 34px;
        &:last-child {
          width: 84%;
          padding: 0 8%;
          text-align: left;
        }
      }
    }
    &-info-inner {
      width: 100%;
      height: 100%;
      z-index: 999;
      position: absolute;
      left: 0;
      font-size: 28px;
      color: #46489a;
      p {
        width: 90%;
        padding: 0 5%;
        text-align: left;
        line-height: 34px;
        a {
          color: #0060ff;
        }
      }
    }
    &-btn {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      width: 100%;
      height: 60px;
      text-align: center;
      &-inner {
        width: 300px;
        height: 60px;
        margin: 0 auto;
        img {
          width: 300px;
          height: 60px;
        }
        a {
          display: block;
          width: 300px;
          height: 60px;
        }
      }

    }
  }
</style>
